<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mystyle.css" />
	</head>

	<body>
		<style>
			.mui-media {
				background: #fff;
			}
			
			.opclist-title {
				font-size: 16px;
			}
		</style>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">监测设备状态</h1>
		</header>
		<div class="mui-content" id="list_content">
			<!--登陆记录列表，js动态插入-->
			<p class="mui-margin-sm" style='margin-top: 0.5rem;margin-right: 1rem;margin-bottom: 0.5rem;margin-left: 1rem;'>每隔1分钟后自动刷新</p>
		</div>

		<script src="../lib/mui/mui.min.js"></script>
		<script src="../js/serviceUrlConfig.js" type="text/javascript"></script>
		<script type="text/javascript">
			(function($, doc) {
				mui.init()
				$.plusReady(function() {
					//获取设备编号
//					var dataList = [{
//							"opcName": "宝杨路水泵远程",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "12"
//						},
//						{
//							"opcName": "宝杨路水泵运行",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "13"
//						},
//						{
//							"opcName": "宝杨路水泵故障",
//							"opcState": "good",
//							"opcParams": "13600",
//							"updateCount": "14"
//						},
//						{
//							"opcName": "宝杨路阀门远程",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "15"
//						},
//						{
//							"opcName": "宝杨路阀门全开",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "16"
//						},
//						{
//							"opcName": "宝杨路阀门全关",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "17"
//						},
//						{
//							"opcName": "宝杨路阀门开过程",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "18"
//						},
//						{
//							"opcName": "宝杨路阀门关过程",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "19"
//						},
//						{
//							"opcName": "宝杨路出口水表脉冲",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "20"
//						},
//						{
//							"opcName": "宝杨路单动联动选择",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "21"
//						},
//						{
//							"opcName": "宝杨路水泵单机启动命令",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "22"
//						},
//						{
//							"opcName": "宝杨路水泵联动启动命令",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "23"
//						},
//						{
//							"opcName": "宝杨路水泵单机停止命令",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "24"
//						},
//						{
//							"opcName": "宝杨路水泵联动停止命令",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "25"
//						},
//						{
//							"opcName": "宝杨路阀门单机开启",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "26"
//						},
//						{
//							"opcName": "宝杨路阀门单机关闭",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "27"
//						},
//						{
//							"opcName": "宝杨路阀门联动开启",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "28"
//						},
//						{
//							"opcName": "宝杨路阀门联动关闭",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "29"
//						},
//						{
//							"opcName": "宝杨路阀门停止",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "30"
//						},
//						{
//							"opcName": "宝杨路阀门未到位",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "31"
//						},
//						{
//							"opcName": "宝杨路视频重启命令",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "32"
//						},
//						{
//							"opcName": "宝杨路水泵本次运行时间",
//							"opcState": "good",
//							"opcParams": "0",
//							"updateCount": "33"
//						},
//						{
//							"opcName": "宝杨路进水水表累计",
//							"opcState": "good",
//							"opcParams": "20",
//							"updateCount": "34"
//						},
//						{
//							"opcName": "宝杨路出水水表总累计",
//							"opcState": "good",
//							"opcParams": "20",
//							"updateCount": "35"
//						},
//						{
//							"opcName": "宝杨路出水水表本次累计",
//							"opcState": "good",
//							"opcParams": "7",
//							"updateCount": "36"
//						},
//						{
//							"opcName": "宝杨路电流",
//							"opcState": "good",
//							"opcParams": "1000",
//							"updateCount": "37"
//						},
//						{
//							"opcName": "宝杨路水位",
//							"opcState": "good",
//							"opcParams": "20",
//							"updateCount": "38"
//						},
//					];
					var url = getServletUrl("OpcServlet");

					$.ajax({
						type: "POST",
						url: url,
						data: {
							commdCode: "getCurrentOpc",
						},
						dataType: "json",
						success: function(data) {
							if(data.type = 1) {
								var dataObj = data.tag;
								var dataList = [];
								for(var key in dataObj) {
									var obj = {};
									obj.opcName = key;
									// obj.opcState = (dataObj[key] == 1 || true) ? 'good' : 'bad';
									obj.opcState = 'good';
									obj.opcParams = dataObj[key];
									obj.updateTime = getNowFormatDate(); //获取当前时间
									dataList.push(obj);
								}
							} else {
								var dataList = [];
							}
							displayHistory(dataList);
						},
						error: function(xhr, type, errorThrown) {
							mui.alert("服务器连接失败，请联系管理员！", "提示");
						}
					});

					function displayHistory(dataList) {
						var content = document.getElementById("list_content");
						var ul = document.createElement("ul");
						ul.classList.add("mui-table-view");
						content.appendChild(ul);
						for(var i = 0; i < dataList.length; i++) {
							var li = document.createElement("li");
							li.classList.add("mui-table-view-cell", "mui-media");
							var a = document.createElement("a");
							a.id = dataList[i].opcName; //a标签的id设置为日志行的主键id
							a.classList.add("opclist-title");
							var img = document.createElement("img");
							img.classList.add("mui-media-object", "mui-pull-left");
							var div = document.createElement("div");
							div.classList.add("mui-media-body");
							var p = document.createElement("p");
							p.classList.add("mui-ellipsis");
							var p1 = document.createElement("p");
							p1.classList.add("mui-ellipsis");
							var p2 = document.createElement("p");
							p2.classList.add("mui-ellipsis");
							var span = document.createElement("span");
							if(dataList[i].opcState == "good") {
								img.src = "../img/good.svg";
							} else {
								img.src = "../img/bad.svg";
							}
							span.innerText = dataList[i].opcName;
							p.innerText = "当前值：" + dataList[i].opcParams;
							p1.innerText = "更新时间：" + getNowFormatDate();
							li.appendChild(a);
							a.appendChild(img);
							a.appendChild(div);
							div.appendChild(span);
							div.appendChild(p);
							div.appendChild(p1);
							ul.appendChild(li);
						}
					}


					function getNowFormatDate() { //获取当前时间
						var date = new Date();
						var seperator1 = "/";
						var seperator2 = ":";
						var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
						var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
							" " + date.getHours() + seperator2 + date.getMinutes() +
							seperator2 + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
						return currentdate;
					}

				});
			}(mui, document));
		</script>
	</body>

</html>